import React from 'react';
import { Input, Button, Radio, Checkbox, Modal, Space } from 'antd';
import axios from '../../axios/axios'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';


export default class Check extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            q_id: 0,
            q_type:'',
            title: '',
            questions: [],
            numberVisible: true,
        }
    }
    componentWillMount() {
        let _this = this;
        let q = this.props.location.state;
        let u = this.props.location.uid;
        console.log(q);
        console.log(u);
        this.setState({
            q_id: q,
        })
            axios.post('/getContentByUid', { q_id: q,u_id:u })
                .then(res => {
                    var json = JSON.parse(res.data.data)
                    console.log(json);
                    _this.setState({
                        q_id:json.q_id,
                        title: json.title,
                        questions: json.questions,
                        numberVisible: json.numberVisible,
                    })

                })
        }
    

 
   
    getTitle() {
        return (
            <div className="editTitle" style={{ margin: '0 20px 20px 20px', padding: 20, textAlign: 'center' }} >
                <h2><strong>{this.state.title}</strong></h2>
            </div>
        );
    }

   

    getQuestions() {
        let questions = this.state.questions;
        const { TextArea } = Input;
        return questions.map((question, questionIndex, array) => {
            if (question.type === 'radio') {
                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>

                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <Radio.Group style={{ textAlign: 'left' }} value={question.value-1}>
                                <Space direction="vertical">
                                    {question.options.map((option, optionIndex) => {
                                        return (
                                            <Radio key={optionIndex} value={optionIndex} style={{ fontSize: 16 }} checked={option.checked}>{option.text}</Radio>
                                        )
                                    })}
                                </Space>
                            </Radio.Group>

                        </div>
                    )
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>

                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>
                            <Radio.Group value={question.value-1} style={{ textAlign: 'left' }}>
                                <Space direction="vertical">
                                    {question.options.map((option, optionIndex) => {
                                        return (
                                            <Radio key={optionIndex} value={optionIndex} style={{ fontSize: 16 }} checked={option.checked}>{option.text}</Radio>
                                        )
                                    })}
                                </Space>
                            </Radio.Group>

                        </div>
                    );
                }

            }
            else if (question.type === 'checkbox') {
                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <Space direction="vertical" >
                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Checkbox key={optionIndex} style={{ fontSize: 16 }} checked={option.checked}>{option.text}</Checkbox>
                                    )
                                })}
                            </Space>
                        </div>
                    );
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>

                            <Space direction="vertical" >
                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Checkbox key={optionIndex} style={{ fontSize: 16 }} checked={option.checked}>{option.text}</Checkbox>
                                    )
                                })}
                            </Space>
                        </div>
                    );
                }
            }

            else if (question.type === 'textarea') {
                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <div style={{ margin: '16px 20px' }}>

                                <TextArea rows={5} value={question.text}  />
                            </div>
                        </div>
                    )
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>
                            <div style={{ margin: '16px 20px' }}>
                                <TextArea rows={5} value={question.text}  />
                            </div>
                        </div>
                    )
                }

            }


            else if (question.type === 'grade') {


                if (this.state.numberVisible === true) {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{questionIndex + 1}.&nbsp;&nbsp;&nbsp;{question.title}{question.required ? '[必填]' : ''}</div>
                            <span style={{ marginRight: 15, fontSize: 18 }}>{question.options[0].text}</span>
                            <Radio.Group value={question.value}>

                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Radio value={optionIndex} key={optionIndex} >{option.grade}</Radio>
                                    )
                                })}

                            </Radio.Group>
                            <span style={{ fontSize: 16 }}>{question.options[question.options.length - 1].text}</span>

                        </div>
                    )
                }
                else {
                    return (
                        <div className="question-border" key={questionIndex}>
                            <div className="questionTitle">{question.title}{question.required ? '[必填]' : ''}</div>
                            <span style={{ marginRight: 15, fontSize: 18 }}>{question.options[0].text}</span>
                            <Radio.Group onChange={(e) => this.radioChange(e, questionIndex)} value={question.value}>

                                {question.options.map((option, optionIndex) => {
                                    return (
                                        <Radio value={optionIndex} key={optionIndex} >{option.grade}</Radio>
                                    )
                                })}

                            </Radio.Group>
                            <span style={{ fontSize: 16 }}>{question.options[question.options.length - 1].text}</span>
                        </div>
                    )
                }
            }

            else {
                return null;
            }
        })
    }
    LinkToList() {
        
            this.props.history.go(-1);
    }
    render() {

                return(
                    <div>
                    <div>
                    <Button type="primary" onClick={this.LinkToList}>返回</Button>
                    </div>
                    {this.getTitle()}
                    <div style={{ marginBottom: 20, padding: 20, borderTop: '2px solid #ccc', borderBottom: '2px solid #ccc' }}>
                        {this.getQuestions()}
                    </div>
                </div>
                )
          }
        }